<template>
  <view class="background" :style="style">
    <view v-if="hasSubBackground" class="bg" />
    <slot />
  </view>
</template>

<script>
import colors from '@/common/colors'
export default {
  name: 'LBackground',
  props: {
    position: {
      type: String,
      default: ''
    },
    color: {
      type: [String, Array], // String:纯色  Array:渐变
      default: ''
    },
    direction: {
      type: String,
      default: 'to bottom'
    },
    bottom: {
      type: String,
      default: '0'
    },
    hasSubBackground: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    style() {
      let str = this.background
      str += `position: ${this.position};`
      str += `bottom: ${this.bottom};`
      return str
    },
    background() {
      if (this.color != null) {
        const type = typeof this.color
        if (type === 'string') {
          return `background: ${this.color};`
        } else {
          const colors = this.color.join(',')
          return `background-image: linear-gradient(${this.direction}, ${colors});`
        }
      } else return `background: ${colors.colorBackground};`
    }
  }
}
</script>

<style scoped lang="scss">
.background{
  @include position(fixed,0,0,0,0);
  background:$color-background;
  z-index: -2;
}
.bg{
  width: 750rpx;
  height: 306rpx;
  background: linear-gradient(to bottom, $color-secondary, rgba(43, 48, 55, 0) 100%);
}
</style>
